<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - Crafty.viewport</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id="header-background"> </div>
	<div id="page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">事件列表</a></li><li class="category">核心<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">动画<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">资源<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">音频<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">控制器<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">调试<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">事件<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">游戏循环<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">图形<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">输入<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">杂项<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">模型<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">场景<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">舞台<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">工具<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.viewport <span></span></h1><div class="doclet" id="Crafty-viewport"><div class="triggered-events"><h4>事件</h4><div class="trigger-list"><dl class="trigger"><dt>ViewportScroll </dt><dd>当视口的x或者y坐标发生变化时触发</dd></dl><dl class="trigger"><dt>ViewportScale </dt><dd>当视口缩放时触发</dd></dl><dl class="trigger"><dt>ViewportResize </dt><dd>当视口改变尺寸时触发</dd></dl><dl class="trigger"><dt>InvalidateViewport </dt><dd>当视口改变时触发</dd></dl><dl class="trigger"><dt>StopCamera </dt><dd>当任何摄像机动画停止时触发，例如开始新的动画。</dd></dl><dl class="trigger"><dt>CameraAnimationDone </dt><dd>当摄像机动画完成时触发。</dd></dl></div></div><span class="markdown"><p>视口本质上是看着舞台的2D摄像机，可以移动和缩放，这和在某个方向上移动摄像机的情形一样。</p>
<p>有多种相机动画方法可用——这些是具有动画时间参数的视口方法和后续方法。一次只能运行一个动画。开始一个新的动画将取消前一个，关联的事件也会被取消。</p>
<p>提示: 在任何特定的时刻，你能看到的东西是…</p>
<p><code>x</code> 在 <code>(-Crafty.viewport._x)</code> 和 <code>(-Crafty.viewport._x + (Crafty.viewport._width / Crafty.viewport._scale))</code> 之间</p>
<p><code>y</code> 在 <code>(-Crafty.viewport._y)</code> 和 <code>(-Crafty.viewport._y + (Crafty.viewport._height / Crafty.viewport._scale))</code> 之间</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><p>防止视窗在游戏世界之外调整自己。缩放视口，使实体出现两倍大。然后在3秒的时间内将视点集中在一个实体上。动画完成后，开始跟随实体。</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});

Crafty.viewport.clampToEntities = <span class="hljs-literal">false</span>;
Crafty.viewport.scale(<span class="hljs-number">2</span>);
Crafty.one(<span class="hljs-string">"CameraAnimationDone"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    Crafty.viewport.follow(ent, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
});
Crafty.viewport.centerOn(ent, <span class="hljs-number">3000</span>);</code></pre></span></div></div><div><h4>属性</h4><ul class="page-toc"><li><a href="#Crafty-viewport-_scale">._scale</a></li><li><a href="#Crafty-viewport-bounds">.bounds</a></li><li><a href="#Crafty-viewport-clampToEntities">.clampToEntities</a></li><li><a href="#Crafty-viewport-y">.y</a></li><li><a href="#Crafty-viewport-x">.x</a></li></ul><h4>方法</h4><ul class="page-toc"><li><a href="#Crafty-viewport-centerOn">.centerOn()</a></li><li><a href="#Crafty-viewport-mouselook">.mouselook()</a></li><li><a href="#Crafty-viewport-follow">.follow()</a></li><li><a href="#Crafty-viewport-onScreen">.onScreen()</a></li><li><a href="#Crafty-viewport-pan">.pan()</a></li><li><a href="#Crafty-viewport-rect">.rect()</a></li><li><a href="#Crafty-viewport-scale">.scale()</a></li><li><a href="#Crafty-viewport-scroll">.scroll()</a></li><li><a href="#Crafty-viewport-zoom">.zoom()</a></li></ul><div class="doclet" id="Crafty-viewport-_scale"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport._scale</h2><span class="markdown"><p>此值是视口的当前缩放（缩放）。当值大于1时，一切看起来更大（放大）。当值小于1时，一切看起来都变小了（放大）。这不会改变舞台本身的大小，只是放大了它显示的内容。</p>
<p>这是一个只读属性: 不要直接设置。可以使用 <code>Crafty.viewport.scale(...)</code>
或 <code>Crafty.viewport.zoom(...)</code> 代替</p>
</span></div><div class="doclet" id="Crafty-viewport-bounds"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.bounds</h2><span class="markdown"><p>定义视口边界的矩形。它应该是一个具有两个属性的对象，<code>max</code>和<code>min</code>，它们都是具有<code>x</code>和<code>y</code>属性的对象。</p>
<p>如果此属性为空，则使用舞台上所有项目的边框。这是初始值。（为了防止这种行为，设置 <code>Crafty.viewport.clampToEntities</code> 为 <code>false</code>)</p>
<p>如果希望将视口绑定在一个轴上而不是另一个轴上，可以使用<code>-Infinity</code>和<code>+Infinity</code>作为边界。</p>
</span><div><h4>参见</h4><ul class="see-also-list"><li><a href="#Crafty-viewport-clampToEntities">.clampToEntities</a></li></ul></div><div class="example"><h4>例子</h4><span class="markdown"><p>设置边界为500，500的方框</p>
<pre><code class="hljs ">Crafty.viewport.bounds = {<span class="hljs-attr">min</span>:{<span class="hljs-attr">x</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">0</span>}, <span class="hljs-attr">max</span>:{<span class="hljs-attr">x</span>:<span class="hljs-number">500</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">500</span>}};</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-clampToEntities"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.clampToEntities</h2><span class="markdown"><p>决定视口函数是否应该锁定到游戏实体。当设置为<code>true</code>时功能和Crafty.viewport.mouselook()一样，将不会允许你移动视口到视口内没有实体。对于开发来说，将其设置为false是很有用的。</p>
</span></div><div class="doclet" id="Crafty-viewport-y"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.y</h2><span class="markdown"><p>将沿着相反方向的<code>Y</code>轴移动舞台，从而移动每一个实体可见。</p>
<p>当设置这个值时，它将改变整个阶段。这意味着实体位置不完全在屏幕上。要获得准确的位置，只需设置对象的<code>y</code>坐标为<code>Crafty.viewport.y</code></p>
</span></div><div class="doclet" id="Crafty-viewport-centerOn"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.centerOn()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.centerOn</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">target</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Object target </dt><dd><span class="markdown"><p>一个 2D 组件</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>摄像机运动的毫秒数</p>
</span></dd></dl></div><span class="markdown"><p>聚焦视口到指定实体</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});
Crafty.viewport.centerOn(ent, <span class="hljs-number">3000</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-mouselook"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.mouselook()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.mouselook</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Boolean </span><span class="sig-noun">active</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Boolean active </dt><dd><span class="markdown"><p>激活或取消视角</p>
</span></dd></dl></div><span class="markdown"><p>在当前视口切换视角。只需调用这个函数，用户就可以拖动周围的视口。</p>
<p>如果用户开始拖动，“StopCamera”将被触发，这将取消任何现有的摄像机动画。</p>
</span></div><div class="doclet" id="Crafty-viewport-x"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.x</h2><span class="markdown"><p>将沿着相反方向的<code>x</code>轴移动舞台和每个可见实体。</p>
<p>当设置这个值时，它将改变整个阶段。这意味着实体位置不完全在屏幕上。要获得准确的位置，只需设置对象的<code>x</code>坐标为<code>Crafty.viewport.x</code></p>
</span></div><div class="doclet" id="Crafty-viewport-follow"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.follow()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.follow</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">target</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">offsetx</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">offsety</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Object target </dt><dd><span class="markdown"><p>一个 2D 组件</p>
</span></dd></dl><dl class="parameter"><dt> Number offsetx </dt><dd><span class="markdown"><p>跟踪目标的中心，应该偏离视口中心 offsetx像素。正值将目标置于屏幕右侧。</p>
</span></dd></dl><dl class="parameter"><dt> Number offsety </dt><dd><span class="markdown"><p>

跟踪目标的中心，应该偏离视口中心 offsety像素。正值将目标置于屏幕底部。 </p>
</span></dd></dl></div><span class="markdown"><p>使用2D组件跟踪给定实体。如果跟随目标将视野的一部分从世界范围内移开，跟随者将停止直到目标移动。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});
Crafty.viewport.follow(ent, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-onScreen"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.onScreen()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-noun">Crafty.viewport.onScreen</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">rect</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> rect </dt><dd><span class="markdown"><p>一个拥有以下字段的矩形 {_x: x_val, _y: y_val, _w: w_val, _h: h_val}</p>
</span></dd></dl></div><span class="markdown"><p>测试矩形是否完全在视口中</p>
</span></div><div class="doclet" id="Crafty-viewport-pan"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.pan()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.pan</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">dx</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">dy</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String|function </span><span class="sig-noun">easingFn</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Number dx </dt><dd><span class="markdown"><p>沿x轴的距离</p>
</span></dd></dl><dl class="parameter"><dt> Number dy </dt><dd><span class="markdown"><p>沿y轴的距离</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>整个摄像机运动的毫秒数</p>
</span></dd></dl><dl class="parameter"><dt> easingFn </dt><dd><span class="markdown"><p>一个指定的非线性函数或字符串 (默认为线性)  更多信息见 Crafty.easing。</p>
</span></dd></dl></div><span class="markdown"><p>在指定的事件内使摄像机移动一定的距离。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// pan the camera 100 px right and down over the duration of 2 seconds using linear easing behaviour</span>
Crafty.viewport.pan(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">2000</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-rect"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.rect()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Object </span><span class="sig-noun">Crafty.viewport.rect</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">out</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Object out </dt><dd><span class="markdown"><p>一个写入<code>rect</code>的可选对象</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>包含当前视口区域的矩形。含有 <code>_x</code>,<code>_y</code>,<code>_w</code>,<code>_h</code> 属性。</p>
</span></dd></dl></div><span class="markdown"><p>获取当前视口可见区域 <code>rect</code> 的便捷方法。
如果没有传递 <code>out</code> 参数, 此函数在调用时返回一个内部的重用对象。
如果要保存视口区域以便以后使用, 请传递 <code>out</code> 参数, 视口区域将写入此对象。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><p><code>rect</code> 等价于以下属性:</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> rect = Crafty.viewport.rect();

rect._x === -Crafty.viewport._x
rect._y === -Crafty.viewport._y
rect._w === Crafty.viewport._width / Crafty.viewport._scale
rect._h === Crafty.viewport._height / Crafty.viewport._scale</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-scale"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.scale()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.scale</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">amt</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Number amt </dt><dd><span class="markdown"><p>元素上 zoom/scale 的值</p>
</span></dd></dl></div><span class="markdown"><p>

调整比例（缩放）。当<code>amt</code>是1，将被设置为正常的大小，例如一个实体为<code>this.w == 20</code>，它将展现为20像素宽。当<code>amt</code>为10时，同一实体将展现为200像素宽（即，放大系数为10），当<code>amt</code>为0.1时，同一实体将为2像素宽（即，放大系数为0.1）。</p>
<p>如果传递 <code>amt</code> 为 0, 这和传递1的处理是一样的, 即：重置缩放</p>
<p>这个方法是绝对缩放，<code>Crafty.viewport.zoom</code>是相对缩放。</p>
</span><div><h4>参见</h4><ul class="see-also-list"><li><a href="#Crafty-viewport-zoom">.zoom</a></li></ul></div><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs ">Crafty.viewport.scale(<span class="hljs-number">2</span>); <span class="hljs-comment">// Zoom in -- all entities will appear twice as large.</span></code></pre></span></div></div><div class="doclet" id="Crafty-viewport-scroll"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.scroll()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-noun">Crafty.viewport.scroll</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">axis</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">val</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> axis </dt><dd><span class="markdown"><p>'x' 或者 'y'</p>
</span></dd></dl><dl class="parameter"><dt> val </dt><dd><span class="markdown"><p>坐标轴上新的绝对位置</p>
</span></dd></dl></div><span class="markdown"><p>将视口移动到指定轴上的位置。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><p>相对初始位置向右移动摄像机500像素，实际上所有的物体都在视口中向左移动了500像素。</p>
<pre><code class="hljs ">Crafty.viewport.scroll(<span class="hljs-string">'_x'</span>, <span class="hljs-number">500</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-zoom"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.zoom()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.zoom</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">amt</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">cent_x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">cent_y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String|function </span><span class="sig-noun">easingFn</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Number amt </dt><dd><span class="markdown"><p>放大视口的倍数（如：2，4，0.5）</p>
</span></dd></dl><dl class="parameter"><dt> Number cent_x </dt><dd><span class="markdown"><p>缩放中心点x坐标</p>
</span></dd></dl><dl class="parameter"><dt> Number cent_y </dt><dd><span class="markdown"><p>缩放中心点y坐标</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>整个缩放操作持续的毫秒数</p>
</span></dd></dl><dl class="parameter"><dt> easingFn </dt><dd><span class="markdown"><p>一个指定的非线性函数或字符串 (默认为线性) 更多信息见 Crafty.easing。</p>
</span></dd></dl></div><span class="markdown"><p>在指定点上改变摄像机的缩放。当 amt &gt; 1 时，将聚焦到指定的物体上。当
amt &lt; 1 时，将远离物体。当 amt = 0 时，将重置缩放。缩放是乘法运算，如果要重置，请使用 0。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Make the entities appear twice as large by zooming in on the specified coordinates over the duration of 3 seconds using linear easing behavior</span>
Crafty.viewport.zoom(<span class="hljs-number">2</span>, <span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">3000</span>);</code></pre></span></div></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png">
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png">
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png">
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>


</body></html>